$(document).ready(function() {
    $('#pagepiling').pagepiling({
        navigation: false
    });

    $(window).bind('mousewheel DOMMouseScroll touchmove', function(){
        effect();
    });
});

function effect(){
    var id = $("#pagepiling > .active").attr("id");

    if(id == "divHeaderHomePage"){
        $(".img-article").removeClass('animated pulse');
    }
    if(id == "divArticleHomePage"){
        $('.img-history').removeClass('animated rotateIn');
        $(".img-article").addClass('animated pulse');
    }
    if(id == "divHistoryHomePage"){
        $(".img-article").removeClass('animated pulse');
        $('.img-transport').removeClass('animated zoomIn');
        $('.img-history').addClass('animated rotateIn');
    }
    if(id == "divTransportHomePage"){
        $('.img-history').removeClass('animated rotateIn');
        $('#imgLogoHomePage').removeClass('animated flipInY');
        $('.img-transport').addClass('animated zoomIn');
    }
    if(id == "divFooterHomePage"){
        $('.img-transport').removeClass('animated zoomIn');
        $('#imgLogoHomePage').addClass('animated flipInY');
    }
}

window.onload = function(){
    autoHome();
    $(window).resize(function () {
        autoHome();
    });
};

function autoHome(){
    if($(window).width() < 768){
        $("nav > ul").addClass("col-xs-12");
        $("nav > ul > li > ul").addClass("col-xs-12 pull-right");
        $("nav > ul > li").css("max-width", "100%");
        $('#imgLogoHomePage').removeClass("pull-right");
        $('#divLogoHomePage').removeClass("pull-right");
        $("nav > ul > li").addClass("col-xs-6");
        $(".circle").css("width", "110%");
        $(".circle").css("height", "30px");
        $('.div-caption').css("top", "-300px");
        $('.span-caption').css("fontSize", "12px");
        $('.title').css("fontSize", "12px");
        $('.img-article').css("width", "60%");
        $('.img-article').css("height", "40%");
        $('.category').css("fontSize", "12px");
        $('.span-title').css("fontSize", "12px");
        $('.line-history-1').css("width", "40px");
        $('.title').css("color", "red");
        $('.carousel-control').css("top", "-50");
    }

    if($(window).width() >= 768){
        $('.title').css("fontSize", "12px");
        $('.title').css("color", "red");
        $('.span-title').css("fontSize", "12px");
        $('.div-caption').css("top", "-150px");
        $('.span-caption').css("fontSize", "24px");
        $('.carousel-control').css("top", "0");
    }

    if($(window).width() >= 992 || $(window).width() >= 1200){
        $("nav > ul > li > ul").removeClass("col-xs-12 pull-right");
        $("nav > ul > li").css("max-width", "120px");
        $('h2').css("font-size", "30px");
        $('#imgLogoHomePage').removeClass("pull-right");
        $('#divLogoHomePage').removeClass("pull-right");
        $(".circle").css("width", "70%");
        $(".circle").css("height", "100px");
        $('.div-caption').css("top", "-100px");
        $("nav > ul > li").removeClass("col-xs-6");
        $('.span-caption').css("fontSize", "30px");
        $('.title').css("fontSize", "30px");
        $('.img-article').css("width", "100%");
        $('.img-article').css("height", "100%");
        $('.category').css("fontSize", "16px");
        $('.span-title').css("fontSize", "16px");
        $('.line-history-1').css("width", "260px");
        $('.carousel-control').css("top", "0");

        //responsive menubar
        $('.li-responsive ').css("width", "150px");
        $('.li-responsive ').css("color", "white");
    }

    //responsive menubar
    if($(window).width() >= 992 && $(window).width() <= 1081){
        $('.li-responsive ').css("width", "100px");
    }
}

$(document).ready(function(){
    $(".circle-history-xs-1").hover(function(){
        inEffectHistory(1, 1);
    },function(){
        outEffectHistory(1, 1);
    });

    $(".circle-history-xs-2").hover(function(){
        inEffectHistory(2, 1);
    },function(){
        outEffectHistory(2, 1);
    });

    $(".circle-history-xs-3").hover(function(){
        inEffectHistory(3, 1);
    },function(){
        outEffectHistory(3, 1);
    });

    $(".circle-history-xs-4").hover(function(){
        inEffectHistory(4, 1);
    },function(){
        outEffectHistory(4, 1);
    });


});

$(document).ready(function(){
    $(".circle-history-1").hover(function(){
        inEffectHistory(1, 0);
    },function(){
        outEffectHistory(1, 0);
    });

    $(".circle-history-2").hover(function(){
        inEffectHistory(2, 0);
    },function(){
        outEffectHistory(2, 0);
    });

    $(".circle-history-3").hover(function(){
        inEffectHistory(3, 0);
    },function(){
        outEffectHistory(3, 0);
    });

    $(".circle-history-4").hover(function(){
        inEffectHistory(4, 0);
    },function(){
        outEffectHistory(4, 0);
    });
});

function inEffectHistory(k, isXS){
    if(isXS == 0){
        $('#imgHistoryHomePage'+k).addClass('animated flip');
        $('#labelHistoryHomePage'+k).addClass('animated zoomInUp');
    }
    else{
        $('#imgXSHistoryHomePage'+k).addClass('animated flip');
        $('#labelXSHistoryHomePage'+k).addClass('animated zoomInUp');
    }
}

function outEffectHistory(k, isXS){
    if(isXS == 0){
        $('#imgHistoryHomePage'+k).removeClass('animated flip');
        $('#labelHistoryHomePage'+k).removeClass('animated zoomInUp');
    }
    else{
        $('#imgXSHistoryHomePage'+k).removeClass('animated flip');
        $('#labelXSHistoryHomePage'+k).removeClass('animated zoomInUp');
    }
}
